@charset "utf-8";
/*!
 * @style.css
 * @功能：1、页面样式
 *       2、时间：2019-04-24
 */

 /*顶部*/
 .hd-h{
 	height: 120px;
 }
 .hd-fl{
 	display: inline-block;
 	line-height: 120px;
 }
 .hd-fl-img{
  width: 323px;
  height: 90px;
  margin-top: 15px;
 }
 .hd-fl-sp1{
 	color: #02b2b5;
 }
 .hd-fl-sp2{
 	color: #ccc;
 }
 .hd-fr{
 	line-height: 120px;
 }
 .hd-fr-li{
 	height: 40px;
 	width: 100px;
 	display: inline-block;
 	line-height: 40px;
 	text-align: center;
 	margin: 0 5px;
 }
 .hd-fr-li-a{
 	border-radius: 20px;
 	color: #333;
 	display: inline-block;
 }
  .hd-fr-li-a-act{
  	color: #fff;
  	background-color: #02b2b5;
  }

  /*首页banner轮播图*/
  .in-ban-hei{
  	height: 550px;
  	overflow: hidden;
  }

  /*首页-案例与经验*/
  .in-ca{
  	margin: 50px 0;
  }
  .in-ca-hd{
  	margin-bottom: 40px;
  	font-size: 25px;
  	color: #000;
  }
  .in-ca-ge{
  	width: 290px;
  	margin-right: 13px;
  	margin-bottom: 30px;
  	position: relative;
  	cursor: pointer;
  }
  .in-ca-ge:nth-child(4n+0){
  	margin-right: 0;
  }
  .in-ca-ge-i{
  	height: 221px;
  	border: 1px solid #ccc;
  	position: relative;
    overflow: hidden;
  }
  .in-ca-ge-img{
  	position: absolute;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .in-ca-ge-sp{
  	font-size: 14px;
  	margin-top: 10px;
  	display: inline-block;
  }
  .in-ca-ge-sear{
  	display: inline-block;
  	width: 60px;
  	height: 60px;
  	background-color: rgba(0,0,0,.6);
  	border-radius: 50%;
  	line-height: 65px;
  	text-align: center;
  	position: absolute;
  	left: 0;
  	right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 5;
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .in-ca-ge-sear-pic{
  	width: 20px;
  	height: 20px;
  }
  .in-ca-ge:hover .in-ca-ge-sear{
  	opacity: 1;
  }
  .in-ca-ge:hover .in-ca-ge-sp{
    color: #02b2b5;
  }

  /*首页-关于我们*/
  .in-ab{
  	width: 1100px;
  	margin: 0 auto;
  }
  .in-ab-hd{
  	margin-bottom: 20px;
  }
  .in-ab-hd-tit{
  	font-size: 22px;
  	color: #000;
  }
  .in-ab-hd-eng{
  	font-size: 14px;
  	margin-top: 7px;
  }
  .in-ab-hd-sp{
  	display: inline-block;
  	height: 2px;
  	width: 35px;
  	background-color: #02b2b5;
  	margin-top: 20px;
  }
  .in-ab-fo{
  	/*height: 265px;*/
  	margin-bottom: 100px;
  }
  .in-ab-fo-img{
  	width: 300px;
  	height: 100%;
  }
  .in-ab-fo-men{
  	width: 660px;
  	height: 100%;
  	position: relative;
  	background-color: #f5f5f5;
  	padding: 20px;
    line-height: 23px;
  }
  .in-ab-fo-men-tit{
  	font-size: 22px;
  	color: #000;
  	margin: 10px 0;
  }
  .in-ab-fo-men-con{
  	font-size: 14px;
  	line-height: 26px;
  }
  .in-ab-fo-men-a{
  	position: absolute;
  	left: 20px;
  	bottom: 0;
  	display: inline-block;
  	width: 150px;
  	height: 44px;
  	line-height: 44px;
  	text-align: center;
  	background-color: #02b2b5;
  	color: #fff;
  }

  /*底部*/
  .fl-bg{
  	height: 100px;
  	background-color: #3b3b3b;
  }
  .fl-le{
  	
  }
  .fl-le-img{
    width: 323px;
    height: 90px;
    margin-top: 5px;
  }
  .fl-le-sp1{
  	color: #40b8a8;
  }
  .fl-le-sp2{
  	color: #cccccc;
  }
  .fl-ri{
  	display: inline-block;
  	width: 800px;
  }
  .fl-ri-hd{
  	margin: 20px 0;
  	text-align: right;
  }
  .fl-ri-hd-li{
  	color: #8b939e;
  }
  .fl-ri-hd-a{
    color: #8b939e;
    font-size: 14px;
    margin: 0 10px;
  }
  .fl-ri-fl{
     font-size: 16px;
     color: #8b939e;
     text-align: right;
  }

  /*回到顶部*/
  .go-top{
  	width: 50px;
  	height: 50px;
  	position: fixed;
  	right: 40px;
  	bottom: 100px;
  	z-index: 99;
  	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    cursor: pointer;
    opacity: 0;
  }
  .go-top:hover{
  	opacity: .5!important;
  }


  /*案例页面*/
  .ca-se{
  	margin-bottom: 50px;
  }
  .ca-hd{
  	padding: 25px 0;
  }
  .ca-hd-chi{
  	font-size: 24px;
    color: #000;
  }
  .ca-hd-eng{
  	font-size: 14px;
  	color: #737373;
  	margin-left: 15px;
  }
  .ca-hd-eng::after{
  	content: "";
  	display: inline-block;
  	width: 6px;
  	height: 9px;
  	margin-left: 16px;
  	background-color: #40b8a8;
  }

  /*案例详情*/
  .ca-de-hd{
  	padding: 25px 0;
  }
  .ca-de-hd-img{
  	width: 15px;
  	height: 15px;
  	margin-right: 5px;
  }
  .ca-de-hd-sp{
  	font-size: 14px;
  	color: #666;
  }
  .ca-de-me{
  	border-bottom: 1px solid #eee;
  	padding-bottom: 30px;
  }
  .ca-de-me-tit{
  	font-size: 24px;
  	color: #000;
  	margin-bottom: 10px;
  }
  .ca-de-me-tim{
  	font-size: 14px;
  	color: #666;
  }
  .ca-de-tai{
  	margin: 20px 0;
  	font-size: 14px;
    line-height: 24px;
  }
  .ca-de-nex{
  	margin: 20px 0 50px;
  	font-size: 16px;
  }

  /*联系页面*/
  .con-con{
    margin-bottom: 50px;
    height: 300px;
  }
  .con-le{
    width: 700px;
    height: 100%;
    overflow: hidden;
  }
  .con-ri{
    width: 460px;
    height: 100%;
    font-size: 14px;
    line-height: 30px;
  }
  .con-ri-p1{
    font-size: 22px;
    margin: 10px 0;
    color: #02b2b5;
  }


  /*动态页面*/
  .ne-con{
  	padding: 8px 0 50px;
  }
  .ne-le{
  	display: inline-block;
  	width: 220px;
  	background-color: #f5f5f5;
  	padding-bottom: 40px;
  }
  .ne-le-a{
  	display: inline-block;
  	height: 60px;
  	line-height: 60px;
  	text-align: center;
  	border-bottom: 1px solid #fff;
  	color: #666;
    cursor: pointer;
  }
  .ne-le-a-act{
  	height: 100px;
  	line-height: 100px;
  	color: #fff;
  	background-color: #02b2b5;
  }
  .ne-ri{
  	display: inline-block;
  	width: 960px;
  	padding: 5px 10px;
  }
  .ne-ri-ge{
  	height: 46px;
  	border-bottom: 1px dashed #e5e5e5;
  	line-height: 46px;
  	font-size: 14px;
  }
  .ne-ri-sp1{
  	color: #666;
  	padding-left: 10px;
  }
  .ne-ri-sp2{
  	color: #666;
  	padding-right: 10px;
  }

  .ab-ab{
  	margin-top: 70px;
  }

  .ne-ri-ge:hover .ne-ri-sp1,
  .ne-ri-ge:hover .ne-ri-sp2{
    color: #02b2b5;
  }


  /*动画样式*/
.animagupIn {

	-webkit-animation:gupIn 1s both;

	-moz-animation:gupIn 1s both;

	-o-animation:gupIn 1s both;

	animation:gupIn 1s both;
}

.animafadeInUp {

	-webkit-animation:fadeInUp .5s both;

	-moz-animation:fadeInUp .5s both;

	-o-animation:fadeInUp .5s both;

	animation:fadeInUp .5s both;
}

/*顶部动画*/
@-webkit-keyframes gupIn{

	from{

		opacity:0; 

		-webkit-transform:translateY(-30px);

		-moz-transform:translateY(-30px);

		-o-transform:translateY(-30px);

		transform:translateY(-30px);
	}
}

@-moz-keyframes gupIn{

	from{

		opacity:0; 

		-webkit-transform:translateY(-30px);

		-moz-transform:translateY(-30px);

		-o-transform:translateY(-30px);

		transform:translateY(-30px);
	}
}

@-o-keyframes gupIn{

	from{

		opacity:0; 

		-webkit-transform:translateY(-30px);

		-moz-transform:translateY(-30px);

		-o-transform:translateY(-30px);

		transform:translateY(-30px);
	}
}

@keyframes gupIn{

	from{

		opacity:0; 

		-webkit-transform:translateY(-30px);

		-moz-transform:translateY(-30px);

		-o-transform:translateY(-30px);

		transform:translateY(-30px);
	}
}

/*内容动画*/

@keyframes fadeInUp {
	0% {

		opacity:0;

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		opacity:1;

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-moz-keyframes fadeInUp {
	0% {

		opacity:0;

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		opacity:1;

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-o-keyframes fadeInUp {
	0% {

		opacity:0;

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		opacity:1;

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-webkit-keyframes fadeInUp {
	0% {

		opacity:0;

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		opacity:1;

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}



.animafadeInUpx {

	-webkit-animation:fadeInUpx 1s both;

	-moz-animation:fadeInUpx 1s both;

	-o-animation:fadeInUpx 1s both;

	animation:fadeInUpx 1s both;
}




@keyframes fadeInUpx {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-moz-keyframes fadeInUpx {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-o-keyframes fadeInUpx {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-webkit-keyframes fadeInUpx {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}



.animafadeInUps {

	-webkit-animation:fadeInUps 1.5s both;

	-moz-animation:fadeInUps 1.5s both;

	-o-animation:fadeInUps 1.5s both;

	animation:fadeInUps 1.5s both;
}




@keyframes fadeInUps {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-moz-keyframes fadeInUps {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-o-keyframes fadeInUps {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}

@-webkit-keyframes fadeInUps {
	0% {

		-webkit-transform:translateX(300px);

		-moz-transform:translateX(300px);

		-o-transform:translateX(300px);

		transform:translateX(300px);

	}

	100% {

		-webkit-transform: none;

		-moz-transform: none;

		-o-transform: none;

		transform: none;

	}
}